<template>
	<view style="background-color: #fff;height: 100vh;">
		<u-navbar title="我的费率" leftIconSize="36" :placeholder="true" :fixed="true" :autoBack="true"
			:safeAreaInsetTop="true" :border-bottom="false"></u-navbar>
		<!-- <u-cell-group>
			<u-cell @click="rate(1)" title="余额还款" :isLink="true"></u-cell>
			<u-cell @click="rate(2)" title="快捷收银" :isLink="true"></u-cell>
		</u-cell-group>
 -->
		<u-collapse @change="change" @close="close" @open="open">
			<u-collapse-item title="余额还款" name="1">
				<view>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">银行
							</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">消费费率
							</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">笔数费
							</view>
						</u-col>
					</u-row>
					<u-row v-for="(item, index) in hkdata" :key="index">
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx; color: #333;font-size: 24rpx;">
								{{item.name}}</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx; color: #333;font-size: 24rpx;">
								万{{parseInt(item.repayment_fee * 10000)}}</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx; color: #333;font-size: 24rpx;">
								{{item.repayment_stroke_count}}</view>
						</u-col>
					</u-row>
				</view>
			</u-collapse-item>
			<u-collapse-item title="快捷收银" name="2">
				<view>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">银行
							</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">消费费率
							</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">笔数费
							</view>
						</u-col>
					</u-row>
					<u-row v-for="(item, index) in kjdata" :key="index">
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx; color: #333;font-size: 24rpx;">
								{{item.name}}</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx; color: #333;font-size: 24rpx;">
								万{{parseInt(item.cashier_fee * 10000)}}</view>
						</u-col>
						<u-col span="4">
							<view style="text-align: center;padding-top: 20rpx; color: #333;font-size: 24rpx;">
								{{item.repayment_stroke_count}}</view>
						</u-col>
					</u-row>
				</view>
			</u-collapse-item>
		</u-collapse>

		<view style="padding: 40rpx;color: #8E8E93;font-size: 28rpx;">
			<view>** 费率说明 **</view>
			<view>消费费率是指消费扣款的时候需要支付的费用比例</view>
			<view>笔数费是指还款的时候需要支付的费用</view>
			<view>例如：</view>
			<view>一万元，连续消费三次，然后全部还到信用卡或储蓄卡，消费费率是0.82%，笔数费是1，那么需要支付的总手续费是82+1=83</view>
			<view>一万元，连续消费三次，消费一次还一次，消费费率是0.82%，笔数费是1，那么需要支付的总手续费是82+3=85</view>
		</view>
	</view>

</template>

<script>
	import {
		creditcardmachineRate
	} from '@/common/creditcardmachine.api.js';
	
	export default {
		data() {
			return {
				hkdata: [],
				kjdata: [],
			}
		},
		onLoad() {
			let that = this;
			creditcardmachineRate({
				config_type: 1
			}).then(res => {		
				that.hkdata = res
			})
			
			creditcardmachineRate({
				config_type: 2
			}).then(res => {		
				that.kjdata = res
			})
		},
		methods: {
			open(e) {
				console.log(e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
